<template>
  <div
    class="app-container home"
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
  >
    <lb-layout>
      <Title name="碳中和概况" :line="false" class="title">
        <stat-painting :data="stat"></stat-painting>
      </Title>

      <Title name="碳中和措施概况" :line="false" class="mt20">
        <comTheme
          :themepieData="themepieData"
          height="200px"
          title="碳汇能力"
        />
      </Title>
      <Title name="碳中和措施成效分析" :line="false" class="mt20">
        <comBudget :comBudgetdata="comBudgetdata" :height="200" />
      </Title>
    </lb-layout>
  </div>
</template>

<script>
import comTheme from "@/views/home/theme/theme.vue"; // 主题库
import comBudget from "@/views/home/budget/budget.vue"; // 能耗预算管控趋势分析
import {
  energyCarbonNeutralMeasureEffectStatistic,
  energyCarbonNeutralMeasureStatistic,
  energyCarbonNeutralStatistic,
} from "@/api/carbonNeutral/statistics";

export default {
  name: "carbonNeutralStatistics",
  components: {
    comTheme,
    comBudget,
  },
  data() {
    return {
      //碳中和概况
      stat: [
        {
          name: "累计购买碳中和指标费用",
          num: 10,
          unit: "元",
          img: require("@/assets/images/iot/zhinengdianbiao.png"),
          imgBgColor: "#a84a4a",
          bgColor: "#D88989",
        },
        {
          name: "碳排累计降幅",
          num: 10,
          unit: "%",
          img: require("@/assets/images/iot/guangfuban.png"),
          imgBgColor: "#3080e7",
          bgColor: "#5b9cec",
        },
      ],
      // 碳中和措施概况
      themepieData: {
        themepieData1: {},
        themepieData2: {},
        themepieData3: [],
      },
      // 碳中和措施成效分析
      comBudgetdata: {
        budgetManageStatics: {},
      },
    };
  },
  created() {
    this.getStat();
    this.getEnergy();
    this.getEnergyCarbonNeutral();
  },
  methods: {
    // 碳中和概况统计
    getStat() {
      const year = new Date().getFullYear();
      energyCarbonNeutralStatistic({ year })
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.stat[0].num = res.data.carbonMeasureIndexFee || 0;
          this.stat[1].num = res.data.dropPercent || 0;
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!300103");
        });
    },
    // 碳中和措施概况
    async getEnergy() {
      const year = new Date().getFullYear();
      this.themeData = [];
      this.$store.commit("app/updateApiCount", "add");
      await energyCarbonNeutralMeasureStatistic({ year })
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          // 清洁能源
          this.themeData1deal(res?.data?.cleanEnergyList ?? []);

          // 清洁能源
          this.themeData2deal(res?.data?.greenPowerList ?? []);

          // 碳汇能力
          this.themeData3deal(res?.data?.carbonSinkList ?? []);
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!300101");
        });
    },
    themeData1deal(data) {
      let color = ["#3669D4", "#00999F", "#4F5467", "#E1B228"];
      let dataArr = data;
      let title = "清洁能源";
      let pieId = "themepieChartsone";
      let themepieData1 = {
        color: color,
        dataArr: dataArr,
        title: title,
        pieId: pieId,
        roseType: "radius",
        radius: ["25%", "70%"],
        position: "center",
        unit: "kgce",
      };
      this.themepieData.themepieData1 = themepieData1;
    },
    themeData2deal(data) {
      let color = ["#3669D4", "#00999F", "#4F5467", "#E1B228"];
      let dataArr = data;
      let title = "绿色电力";
      let pieId = "themepieChartstwo";
      let themepieData2 = {
        color: color,
        dataArr: dataArr,
        title: title,
        pieId: pieId,
        radius: ["40%", "70%"],
        position: "center",
        unit: "kwh",
      };
      this.themepieData.themepieData2 = themepieData2;
    },
    themeData3deal(data) {
      this.themepieData.themepieData3 = data;
    },
    // 碳中和措施成效分析
    async getEnergyCarbonNeutral() {
      // const yearNum = new Date().getFullYear();
      await energyCarbonNeutralMeasureEffectStatistic({ yearNum: 10 })
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.budgetManageStaticsdeal(res?.data);
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!300102");
        });
    },
    budgetManageStaticsdeal(data) {
      let xaxisData = [];
      let carbonSinkMoneyList = []; //碳汇
      let cleanEnergyMoneyList = []; //清洁能源
      let energyBudgetMoneyList = []; //单位面积能耗
      let greenPowerMoneyList = []; //绿色能源
      data.map((item) => {
        xaxisData.push(item.year + "年");
        carbonSinkMoneyList.push(item.cleanEnergyMoney);
        cleanEnergyMoneyList.push(item.cleanEnergyMoney);
        energyBudgetMoneyList.push(item.energyValFee);
        greenPowerMoneyList.push(item.greenPowerMoney);
      });
      this.comBudgetdata.budgetManageStatics = {
        xData: xaxisData,
        yData: [
          { name: "单位面积能耗费用", data: energyBudgetMoneyList },
          { name: "清洁能源措施费用", data: cleanEnergyMoneyList },
          { name: "绿色电力措施费用", data: greenPowerMoneyList },
          { name: "碳汇措施费用", data: carbonSinkMoneyList },
        ],
      };
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  background: #31553A;
}
// .home {
//   ::v-deep .el-card__header {
//     border-bottom: none;
//   }
//   .row-inline {
//     width: 100%;
//     display: flex;
//     flex-wrap: nowrap;
//     align-items: center;
//   }
//   .text-tabs {
//     margin-bottom: 5px;
//   }
//   .box-card {
//     .clearfix {
//       height: 22px;
//       width: 100%;
//       span {
//         opacity: 0.8;
//       }
//     }
//     span {
//       &:nth-child(1) {
//         font-size: 20px;
//         font-weight: 600;
//         color: #333333;
//       }
//     }
//     .constip {
//       display: flex;
//       align-items: center;
//       .cons-tabs {
//         margin-right: 20px;
//       }
//     }
//     .unit {
//       span {
//         font-weight: 400;
//         font-size: 14px;
//         font-style: normal;
//         letter-spacing: 0;
//         text-decoration: none;
//         &:nth-child(1) {
//           color: rgb(16, 16, 16);
//           margin-right: 10px;
//         }
//         &:nth-child(2) {
//           color: rgb(247, 122, 5);
//         }
//       }
//     }
//   }
// }
</style>
